<template>
  <el-dialog
    @close="closeaddForm"
    title="添加用户"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <!-- 添加表单项 -->
    <el-form
      :model="addFrom"
      :rules="addFromRules"
      ref="addFromRef"
      label-width="70px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addFrom.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addFrom.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addFrom.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="addFrom.mobile"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addUsers">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UserAddDialogo',
  data() {
    //邮箱的验证规则
    var checkEmail = (rule, value, callback) => {
      //定义正则表达式
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      //验证值
      if (regEmail.test(value)) {
        return callback()
      } else {
        callback(new Error('输入合法邮箱'))
      }
    }
    //手机的验证规则
    var checkMobile = (rule, value, callback) => {
      //定义正则表达式
      const regMobile =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      //验证值
      if (regMobile.test(value)) {
        return callback()
      } else {
        callback(new Error('输入合法手机号'))
      }
    }
    return {
      //控制对话框显示与隐藏
      dialogVisible: false,
      //表单的数据元素
      addFrom: {
        username: 'admin',
        password: '123123',
        email: '1449470560@qq.com',
        mobile: '18979487132',
      },
      //表单验证规则
      addFromRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile },
        ],
      },
    }
  },
  methods: {
    closeaddForm() {
      //重置操作
      this.$refs.addFromRef.resetFields()
    },
    //添加用户操作
    addUsers() {
      this.$refs.addFromRef.validate(async valid => {
        if (!valid) return
        //请求参数
        const { data: res } = await this.$http.post('users', this.addFrom)
        console.log(res)
        if (res.meta.status !== 201) {
          this.$message.error(res.meta.msg)
        } else {
          this.$message.success(res.meta.msg)
          this.$parent.$parent.getqueryUsers()
          this.dialogVisible = false
        }
      })
    },
  },
}
</script>

<style>
</style>